<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlowLine - 系统设置</title>
    <link rel="stylesheet" href="../css/type.css">
    <link rel="stylesheet" href="settings.css">
</head>
<body>
    <nav class="navbar">
        <div class="logo">FlowLine</div>
        <div class="nav-items">
            <div class="nav-item"><a href="/gpu">GPU</a></div>
            <div class="nav-item"><a href="/tasks">任务</a></div>
            <div class="nav-item"><a href="/logs">日志</a></div>
            <div class="nav-item active"><a href="/settings">设置</a></div>
        </div>
        <div class="user-info">
            <span>Admin</span>
        </div>
    </nav>
    
    <div class="toast-container" id="toastContainer"></div>

    <div class="container">
        <div class="settings-container">
            <div class="settings-tabs">
                <div class="tab-item active" data-tab="general">
                    <div class="tab-icon general"></div>
                    <div class="tab-label">通用设置</div>
                </div>
                <div class="tab-item" data-tab="gpu">
                    <div class="tab-icon gpu"></div>
                    <div class="tab-label">GPU 设置</div>
                </div>
                <div class="tab-item" data-tab="tasks">
                    <div class="tab-icon tasks"></div>
                    <div class="tab-label">任务设置</div>
                </div>
                <div class="tab-item" data-tab="logs">
                    <div class="tab-icon logs"></div>
                    <div class="tab-label">日志设置</div>
                </div>
                <div class="tab-item" data-tab="system">
                    <div class="tab-icon system"></div>
                    <div class="tab-label">系统设置</div>
                </div>
                <div class="tab-item" data-tab="about">
                    <div class="tab-icon about"></div>
                    <div class="tab-label">关于</div>
                </div>
            </div>
            
            <div class="settings-content">
                <!-- 通用设置面板 -->
                <div class="settings-panel active" id="general-panel">
                    <div class="section-header">
                        <h2>通用设置</h2>
                        <div class="header-actions">
                            <button id="saveGeneralBtn">保存设置</button>
                        </div>
                    </div>
                    <div class="settings-form">
                        <div class="settings-group">
                            <h3>应用程序设置</h3>
                            
                            <div class="form-group">
                                <label for="appName">应用名称</label>
                                <input type="text" id="appName" value="FlowLine">
                            </div>
                            
                            <div class="form-group">
                                <label for="language">界面语言</label>
                                <select id="language">
                                    <option value="zh-CN" selected>简体中文</option>
                                    <option value="en-US" disabled>English（暂不可用）</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="theme">界面主题</label>
                                <select id="theme">
                                    <option value="light" selected>浅色主题</option>
                                    <option value="dark" disabled>深色主题（暂不可用）</option>
                                    <option value="system" disabled>跟随系统（暂不可用）</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="settings-group">
                            <h3>数据设置</h3>
                            
                            <div class="form-group">
                                <label for="dataDir">数据目录</label>
                                <input type="text" id="dataDir" value="/home/me/flowline/data" disabled>
                            </div>
                            
                            <div class="form-group">
                                <label for="backupInterval">自动备份间隔 (小时)</label>
                                <input type="number" id="backupInterval" value="24" min="1" max="168" disabled>
                            </div>
                            
                            <div class="form-group switch-group">
                                <label for="autoCleanup">自动清理过期数据</label>
                                <label class="switch" >
                                    <input type="checkbox" id="autoCleanup" checked disabled>
                                    <span class="slider round"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- GPU设置面板 -->
                <div class="settings-panel" id="gpu-panel">
                    <div class="section-header">
                        <h2>GPU 设置</h2>
                        <div class="header-actions">
                            <button id="saveGpuBtn">保存设置</button>
                        </div>
                    </div>
                    <div class="settings-form">
                        <div class="settings-group">
                            <h3>GPU 监控设置</h3>
                            
                            <div class="form-group">
                                <label for="gpuRefreshInterval">刷新间隔 (秒)</label>
                                <input type="number" id="gpuRefreshInterval" value="5" min="1" max="60">
                            </div>
                            
                            <div class="form-group">
                                <label for="temperatureUnit">温度单位</label>
                                <select id="temperatureUnit">
                                    <option value="celsius" selected>摄氏度 (°C)</option>
                                    <option value="fahrenheit">华氏度 (°F)</option>
                                </select>
                            </div>
                            
                            <div class="form-group switch-group">
                                <label for="gpuAutoDetect">自动检测GPU</label>
                                <label class="switch">
                                    <input type="checkbox" id="gpuAutoDetect" checked>
                                    <span class="slider round"></span>
                                </label>
                            </div>
                        </div>
                        
                        <div class="settings-group">
                            <h3>GPU 性能阈值</h3>
                            
                            <div class="form-group">
                                <label for="maxTemperature">最高温度警告 (°C)</label>
                                <input type="number" id="maxTemperature" value="85" min="60" max="110">
                            </div>
                            
                            <div class="form-group">
                                <label for="maxUtilization">最高利用率警告 (%)</label>
                                <input type="number" id="maxUtilization" value="95" min="50" max="100">
                            </div>
                            
                            <div class="form-group">
                                <label for="maxMemoryUsage">最高内存使用警告 (%)</label>
                                <input type="number" id="maxMemoryUsage" value="90" min="50" max="100">
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 任务设置面板 -->
                <div class="settings-panel" id="tasks-panel">
                    <div class="section-header">
                        <h2>任务设置</h2>
                        <div class="header-actions">
                            <button id="saveTasksBtn">保存设置</button>
                        </div>
                    </div>
                    <div class="settings-form">
                        <div class="settings-group">
                            <h3>任务执行设置</h3>
                            
                            <div class="form-group">
                                <label for="maxConcurrentTasks">最大并发任务数</label>
                                <input type="number" id="maxConcurrentTasks" value="4" min="1" max="32">
                            </div>
                            
                            <div class="form-group">
                                <label for="taskTimeoutHours">默认任务超时时间 (小时)</label>
                                <input type="number" id="taskTimeoutHours" value="24" min="1" max="168">
                            </div>
                            
                            <div class="form-group switch-group">
                                <label for="autoRetry">失败任务自动重试</label>
                                <label class="switch">
                                    <input type="checkbox" id="autoRetry" checked>
                                    <span class="slider round"></span>
                                </label>
                            </div>
                            
                            <div class="form-group">
                                <label for="maxRetries">最大重试次数</label>
                                <input type="number" id="maxRetries" value="3" min="1" max="10">
                            </div>
                        </div>
                        
                        <div class="settings-group">
                            <h3>存储设置</h3>
                            
                            <div class="form-group">
                                <label for="taskHistoryDays">保留历史任务天数</label>
                                <input type="number" id="taskHistoryDays" value="30" min="1" max="365">
                            </div>
                            
                            <div class="form-group switch-group">
                                <label for="compressTaskLogs">压缩任务日志</label>
                                <label class="switch">
                                    <input type="checkbox" id="compressTaskLogs">
                                    <span class="slider round"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 日志设置面板 -->
                <div class="settings-panel" id="logs-panel">
                    <div class="section-header">
                        <h2>日志设置</h2>
                        <div class="header-actions">
                            <button id="saveLogsBtn">保存设置</button>
                        </div>
                    </div>
                    <div class="settings-form">
                        <div class="settings-group">
                            <h3>日志记录级别</h3>
                            
                            <div class="form-group">
                                <label for="globalLogLevel">全局日志级别</label>
                                <select id="globalLogLevel">
                                    <option value="debug">DEBUG</option>
                                    <option value="info" selected>INFO</option>
                                    <option value="warning">WARNING</option>
                                    <option value="error">ERROR</option>
                                    <option value="critical">CRITICAL</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="gpuLogLevel">GPU模块日志级别</label>
                                <select id="gpuLogLevel">
                                    <option value="debug">DEBUG</option>
                                    <option value="info" selected>INFO</option>
                                    <option value="warning">WARNING</option>
                                    <option value="error">ERROR</option>
                                    <option value="critical">CRITICAL</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="apiLogLevel">API模块日志级别</label>
                                <select id="apiLogLevel">
                                    <option value="debug">DEBUG</option>
                                    <option value="info" selected>INFO</option>
                                    <option value="warning">WARNING</option>
                                    <option value="error">ERROR</option>
                                    <option value="critical">CRITICAL</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="settings-group">
                            <h3>日志存储设置</h3>
                            
                            <div class="form-group">
                                <label for="logDir">日志目录</label>
                                <input type="text" id="logDir" value="/home/me/flowline/flowline/log">
                            </div>
                            
                            <div class="form-group">
                                <label for="maxLogSizeMB">单个日志文件最大体积 (MB)</label>
                                <input type="number" id="maxLogSizeMB" value="100" min="1" max="1000">
                            </div>
                            
                            <div class="form-group">
                                <label for="logRotationCount">日志文件轮转数量</label>
                                <input type="number" id="logRotationCount" value="5" min="1" max="20">
                            </div>
                            
                            <div class="form-group switch-group">
                                <label for="compressOldLogs">压缩旧日志文件</label>
                                <label class="switch">
                                    <input type="checkbox" id="compressOldLogs" checked>
                                    <span class="slider round"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 系统设置面板 -->
                <div class="settings-panel" id="system-panel">
                    <div class="section-header">
                        <h2>系统设置</h2>
                        <div class="header-actions">
                            <button id="saveSystemBtn">保存设置</button>
                        </div>
                    </div>
                    <div class="settings-form">
                        <div class="settings-group">
                            <h3>系统资源设置</h3>
                            
                            <div class="form-group">
                                <label for="maxCpuUsage">最大CPU使用率 (%)</label>
                                <input type="number" id="maxCpuUsage" value="80" min="10" max="100">
                            </div>
                            
                            <div class="form-group">
                                <label for="maxMemoryUsagePercent">最大内存使用率 (%)</label>
                                <input type="number" id="maxMemoryUsagePercent" value="80" min="10" max="100">
                            </div>
                            
                            <div class="form-group">
                                <label for="diskSpaceWarning">磁盘空间警告阈值 (GB)</label>
                                <input type="number" id="diskSpaceWarning" value="20" min="1" max="100">
                            </div>
                        </div>
                        
                        <div class="settings-group">
                            <h3>网络设置</h3>
                            
                            <div class="form-group">
                                <label for="apiPort">API服务端口</label>
                                <input type="number" id="apiPort" value="5000" min="1024" max="65535">
                            </div>
                            
                            <div class="form-group">
                                <label for="apiHost">API服务主机</label>
                                <input type="text" id="apiHost" value="0.0.0.0">
                            </div>
                            
                            <div class="form-group switch-group">
                                <label for="enableAuth">启用API身份验证</label>
                                <label class="switch">
                                    <input type="checkbox" id="enableAuth" checked>
                                    <span class="slider round"></span>
                                </label>
                            </div>
                        </div>
                        
                        <div class="settings-group">
                            <h3>高级设置</h3>
                            
                            <div class="form-group switch-group">
                                <label for="debugMode">启用调试模式</label>
                                <label class="switch">
                                    <input type="checkbox" id="debugMode">
                                    <span class="slider round"></span>
                                </label>
                            </div>
                            
                            <div class="form-group">
                                <button id="resetSystemBtn" class="danger-btn">重置系统设置</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 关于面板 -->
                <div class="settings-panel" id="about-panel">
                    <div class="section-header">
                        <h2>关于 FlowLine</h2>
                    </div>
                    <div class="about-content">
                        <div class="app-logo"></div>
                        <h3>FlowLine</h3>
                        <div class="version">Version 1.2.3</div>
                        <p>FlowLine 是用于管理GPU、并发运行指令流的自动化系统</p>
                        
                        <div class="info-group">
                            <div class="info-label">系统信息</div>
                            <div class="info-value" id="systemInfo">加载中...</div>
                        </div>
                        
                        <div class="info-group">
                            <div class="info-label">运行时间</div>
                            <div class="info-value" id="uptime">加载中...</div>
                        </div>
                        
                        <div class="info-group">
                            <div class="info-label">许可证</div>
                            <div class="info-value">Apache-2.0 license</div>
                        </div>
                        
                        <div class="action-buttons">
                            <button id="checkUpdatesBtn">检查更新</button>
                            <button id="viewLogsBtn">查看系统日志</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="confirm-dialog" id="confirmDialog">
        <div class="dialog-content">
            <h3>确认操作</h3>
            <p id="confirmMessage">您确定要执行此操作吗？</p>
            <div class="dialog-buttons">
                <button id="cancelBtn" class="cancel-btn">取消</button>
                <button id="confirmBtn" class="confirm-btn">确认</button>
            </div>
        </div>
    </div>
    
    <script src="../js/type.js"></script>
    <script src="settings.js"></script>
</body>
</html> 